import { View } from "@tarojs/components"
import { CSSProperties, useEffect, useState } from "react"
import { IconImg } from "./images"

export const ReserveSort: React.FC<{
  onChange?: (status: boolean) => void,
  style?: CSSProperties
}> = ({ onChange, style }): JSX.Element => {
  const [status, setStatus] = useState(false)//排序状态 true 正序 false 反序
  const [statusText, setStatusText] = useState<'正序' | '反序'>('正序')//状态文字
  const [statusIcon, setStatusIcon] = useState<'positive' | 'reverse'>('positive')//排序状态图标
  useEffect(() => {
    setStatusText(!status ? '正序' : '反序')
    setStatusIcon(!status ? 'positive' : 'reverse')
  }, [status])

  return <View
    className='text-xx_text flex items-center'
    onClick={() => {
      setStatus(!status)
      onChange && onChange(status)
    }}
    style={Object.assign({
      fontSize: '20rpx'
    }, style)}
  >
    <IconImg imgName={statusIcon} style={{ width: '32rpx', height: '32rpx' }}></IconImg>
    {statusText}
  </View>
}